<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片压缩工具</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 顶部标题区域 -->
    <header class="header">
        <h1>图片压缩工具</h1>
        <p>简单快速地压缩您的图片，支持 PNG、JPG 格式</p>
    </header>

    <!-- 主要内容区域 -->
    <main class="container">
        <!-- 上传区域 -->
        <div class="upload-area" id="dropZone">
            <div class="upload-content">
                <img src="upload-icon.svg" alt="上传图标" class="upload-icon">
                <p>拖拽图片到这里或点击上传（最多10张）</p>
                <input type="file" id="fileInput" accept="image/png,image/jpeg" multiple hidden>
                <button class="upload-btn" onclick="document.getElementById('fileInput').click()">
                    选择图片
                </button>
            </div>
        </div>

        <!-- 压缩控制区域 -->
        <div class="compression-controls" id="compressionControls" style="display: none;">
            <div class="slider-container">
                <label for="quality">压缩质量：<span id="qualityValue">80%</span></label>
                <input type="range" id="quality" min="0" max="100" value="80" class="slider">
            </div>
        </div>

        <!-- 预览区域 -->
        <div class="preview-container" id="previewContainer" style="display: none;">
            <!-- 预览内容将由 JavaScript 动态生成 -->
        </div>

        <!-- 在 preview-container 前添加批量操作按钮 -->
        <div class="batch-controls" id="batchControls" style="display: none;">
            <button class="download-btn" id="downloadAllBtn">下载所有压缩图片</button>
            <button class="download-btn" id="downloadZipBtn">打包下载(ZIP)</button>
        </div>
    </main>

    <!-- 添加 JSZip 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js"></script>
    <script src="script.js"></script>
</body>
</html> 